import {
  AlipayCircleOutlined,
  LockOutlined,
  MobileOutlined,
  TaobaoCircleOutlined,
  UserOutlined,
  WeiboCircleOutlined
} from '@ant-design/icons'
import {
  LoginForm,
  ProConfigProvider,
  ProFormCheckbox,
  ProFormText,
  setAlpha
} from '@ant-design/pro-components'
import { Space, Tabs, message, theme, Button } from 'antd'
import React, { useCallback, useState, useRef } from 'react'
import { login, register } from '@/service/auth'
import md5 from 'md5'
import { history } from 'umi'

export default () => {
  const loginFormRef = useRef()
  const { token } = theme.useToken()
  const [loginType, setLoginType] = useState('account')

  const iconStyles = {
    marginInlineStart: '16px',
    color: setAlpha(token.colorTextBase, 0.2),
    fontSize: '24px',
    verticalAlign: 'middle',
    cursor: 'pointer'
  }

  const userLoginOrUserReg = useCallback(
    async (values) => {
      values.password = md5(values.password)
      if (loginType === 'account') {
        const { username, password } = values
        const res = await login({ username, password })
        if (res.status === 1 && res.success) {
          // 登录成功
          message.success('登录成功')
          localStorage.setItem('token', `Bearer ${res?.data}`)
          history.push('/study-square')
        }
      } else if (loginType === 'register') {
        const { username, password } = values
        const res = await register({ username, password })
        if (res.status === 1) {
          // 注册成功
          message.success('注册成功,请登录')
        }
      }
    },
    [loginType]
  )

  return (
        <ProConfigProvider hashed={false}>
            <div style={{ backgroundColor: token.colorBgContainer }}>
                <LoginForm
                    formRef={loginFormRef}
                    logo=""
                    title={loginType === 'account' ? '用户登录' : '用户注册'}
                    subTitle="用于学习交流的平台"
                    actions={
                        <Space>
                            其他登录方式
                            <AlipayCircleOutlined style={iconStyles} />
                            <TaobaoCircleOutlined style={iconStyles} />
                            <WeiboCircleOutlined style={iconStyles} />
                        </Space>
                    }
                    onFinish={async (values) => {
                      await userLoginOrUserReg(values)
                    }}
                    submitter={{
                      render: (props) => {
                        return (
                                <Button
                                    type="primary"
                                    size="large"
                                    style={{
                                      width: '100%'
                                    }}
                                    onClick={() => {
                                      // eslint-disable-next-line react/prop-types
                                      props.submit()
                                    }}
                                >
                                    {loginType === 'account' ? '登录' : '注册'}
                                </Button>
                        )
                      }
                    }}
                >
                    <Tabs
                        centered
                        activeKey={loginType}
                        onChange={(activeKey) => setLoginType(activeKey)}
                    >
                        <Tabs.TabPane key={'account'} tab={'账号密码登录'} />
                        <Tabs.TabPane key={'register'} tab={'注册'} />
                    </Tabs>
                    {loginType === 'account' && (
                        <>
                            <ProFormText
                                name="username"
                                fieldProps={{
                                  size: 'large',
                                  prefix: (
                                        <UserOutlined
                                            className={'prefixIcon'}
                                        />
                                  )
                                }}
                                placeholder={'用户名'}
                                rules={[
                                  {
                                    required: true,
                                    message: '请输入用户名!'
                                  }
                                ]}
                            />
                            <ProFormText.Password
                                name="password"
                                fieldProps={{
                                  size: 'large',
                                  prefix: (
                                        <LockOutlined
                                            className={'prefixIcon'}
                                        />
                                  ),
                                  strengthText:
                                        'Password should contain numbers, letters and special characters, at least 8 characters long.',
                                  statusRender: (value) => {
                                    const getStatus = () => {
                                      if (value && value.length > 12) {
                                        return 'ok'
                                      }
                                      if (value && value.length > 6) {
                                        return 'pass'
                                      }
                                      return 'poor'
                                    }
                                    const status = getStatus()
                                    if (status === 'pass') {
                                      return (
                                                <div
                                                    style={{
                                                      color: token.colorWarning
                                                    }}
                                                >
                                                    强度：中
                                                </div>
                                      )
                                    }
                                    if (status === 'ok') {
                                      return (
                                                <div
                                                    style={{
                                                      color: token.colorSuccess
                                                    }}
                                                >
                                                    强度：强
                                                </div>
                                      )
                                    }
                                    return (
                                            <div
                                                style={{
                                                  color: token.colorError
                                                }}
                                            >
                                                强度：弱
                                            </div>
                                    )
                                  }
                                }}
                                placeholder={'密码'}
                                rules={[
                                  {
                                    required: true,
                                    message: '请输入密码！'
                                  }
                                ]}
                            />
                            <div
                                style={{
                                  marginBlockEnd: 24
                                }}
                            >
                                <ProFormCheckbox noStyle name="autoLogin">
                                    自动登录
                                </ProFormCheckbox>
                                <a
                                    style={{
                                      float: 'right'
                                    }}
                                >
                                    忘记密码
                                </a>
                            </div>
                        </>
                    )}
                    {loginType === 'register' && (
                        <>
                            <ProFormText
                                fieldProps={{
                                  size: 'large',
                                  prefix: (
                                        <MobileOutlined
                                            className={'prefixIcon'}
                                        />
                                  )
                                }}
                                name="username"
                                placeholder={'用户名'}
                                rules={[
                                  {
                                    required: true,
                                    message: '请输入用户名！'
                                  }
                                ]}
                            />
                            <ProFormText.Password
                                name="password"
                                fieldProps={{
                                  size: 'large',
                                  prefix: (
                                        <LockOutlined
                                            className={'prefixIcon'}
                                        />
                                  ),
                                  strengthText:
                                        'Password should contain numbers, letters and special characters, at least 8 characters long.',
                                  statusRender: (value) => {
                                    const getStatus = () => {
                                      if (value && value.length > 12) {
                                        return 'ok'
                                      }
                                      if (value && value.length > 6) {
                                        return 'pass'
                                      }
                                      return 'poor'
                                    }
                                    const status = getStatus()
                                    if (status === 'pass') {
                                      return (
                                                <div
                                                    style={{
                                                      color: token.colorWarning
                                                    }}
                                                >
                                                    强度：中
                                                </div>
                                      )
                                    }
                                    if (status === 'ok') {
                                      return (
                                                <div
                                                    style={{
                                                      color: token.colorSuccess
                                                    }}
                                                >
                                                    强度：强
                                                </div>
                                      )
                                    }
                                    return (
                                            <div
                                                style={{
                                                  color: token.colorError
                                                }}
                                            >
                                                强度：弱
                                            </div>
                                    )
                                  }
                                }}
                                placeholder={'密码'}
                                rules={[
                                  {
                                    validator: (_, text, cb) => {
                                      if (!text) {
                                        cb('请输入密码！')
                                      }
                                      const password =
                                                loginFormRef?.current?.getFieldsValue()
                                                  .rePassword
                                      if (!password) {
                                        cb()
                                        return
                                      }
                                      if (text === password) {
                                        cb()
                                      } else {
                                        cb('密码和确认密码不一致！')
                                      }
                                    }
                                  }
                                ]}
                            />
                            <ProFormText.Password
                                name="rePassword"
                                fieldProps={{
                                  size: 'large',
                                  prefix: (
                                        <LockOutlined
                                            className={'prefixIcon'}
                                        />
                                  ),
                                  strengthText:
                                        'Password should contain numbers, letters and special characters, at least 8 characters long.',
                                  statusRender: (value) => {
                                    const getStatus = () => {
                                      if (value && value.length > 12) {
                                        return 'ok'
                                      }
                                      if (value && value.length > 6) {
                                        return 'pass'
                                      }
                                      return 'poor'
                                    }
                                    const status = getStatus()
                                    if (status === 'pass') {
                                      return (
                                                <div
                                                    style={{
                                                      color: token.colorWarning
                                                    }}
                                                >
                                                    强度：中
                                                </div>
                                      )
                                    }
                                    if (status === 'ok') {
                                      return (
                                                <div
                                                    style={{
                                                      color: token.colorSuccess
                                                    }}
                                                >
                                                    强度：强
                                                </div>
                                      )
                                    }
                                    return (
                                            <div
                                                style={{
                                                  color: token.colorError
                                                }}
                                            >
                                                强度：弱
                                            </div>
                                    )
                                  }
                                }}
                                placeholder={'确认密码'}
                                rules={[
                                  {
                                    validator: (_, text, cb) => {
                                      if (!text) {
                                        cb('请输入确认密码！')
                                      }
                                      const password =
                                                loginFormRef?.current?.getFieldsValue()
                                                  .password
                                      if (!password) {
                                        cb()
                                        return
                                      }
                                      if (text === password) {
                                        cb()
                                      } else {
                                        cb('密码和确认密码不一致！')
                                      }
                                    }
                                  }
                                ]}
                            />
                        </>
                    )}
                </LoginForm>
            </div>
        </ProConfigProvider>
  )
}
